<template>
	<view class="flowerPage">
		<!-- #ifndef MP-TOUTIAO -->
		<view class="fixedTop">
			<u-status-bar></u-status-bar>
			<view style="height: 88rpx;display: flex;align-items: center;justify-content: space-between;">
				<image src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/gift/leftBack.png"
					mode="scaleToFill" @click="navigateBack()"></image>
				<view>鲜花</view>
				<text></text>
			</view>
		</view>
		<!-- #endif -->
		<view class="topNum">
			<view class="value">
				{{userInfo.get_flower}}
			</view>
			<view class="key">总鲜花</view>
		</view>
		<view class="content">
			<view class="title">
				<view class="left">
					鲜花明细
					<text @click="showflower = true">鲜花兑换金豆</text>
				</view>
				<view class="right" @click="redirectTo('/pages/my/giftPage')">
					<image src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/Switch.png"
						mode="scaleToFill"></image>
					<text>礼物</text>
				</view>
			</view>
			<view class="list">
				<view class="item" v-for="(v,i) in Records" :key="i">
					<view class="left">
						<image :src="v.user.avatar" mode="scaleToFill"></image>
						<view class="userData">
							<view class="name">{{v.user.nickname}}</view>
							<!-- <view class="time">2025-02-25</view> -->
						</view>
					</view>
					<view class="right">
						<image src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/hua2.png"
							mode="scaleToFill"></image>
						<text>{{v.total_flowers}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 鲜花换金豆弹窗 -->
		<u-popup :show="showflower" mode="center" round="10" :safeAreaInsetBottom="false" @close="closeshowflower">
			<view class="showflower">
				<view class="tis">请设置要兑换的金豆数量</view>
				<view class="boxContent">当前鲜花数<text
						style="color: rgb(255, 80, 74);padding: 0 15rpx;">{{userInfo.get_flower}}</text>,200朵鲜花可兑换1金豆</view>
				<u-number-box integer v-model="point" inputWidth="80"></u-number-box>
				<view class="btns">
					<view class="btn" @click="closeshowflower">取消</view>
					<view class="btn active" @click="swapPointByFlower()">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				page: 1,
				Records: [],
				total: 0,
				showflower: false,
				point: 1,
				antiShake: false,
			}
		},
		onLoad() {
			this.geFlowerUser()
			this.getUserInfo()
		},
		methods: {
			closeshowflower() {
				this.showflower = false
				this.point = 1
			},
			// 获得的鲜花兑换金豆
			async swapPointByFlower() {
				if (this.antiShake || !this.showflower) return
				this.antiShake = true
				let res = await this.$http("api/user/swapPointByFlower", {
					point: this.point, //true	string		需要兑换的金豆数
				})
				if (res.code == 200) {
					this.showflower = false
					this.getUserInfo()
					uni.showToast({
						title: '兑换成功',
						duration: 2000
					})
					this.point = 1
				}
				this.antiShake = false
			},
			async getUserInfo() {
				let res = await this.$http("api/user/getUserInfo", {}, "GET")
				// console.log(res);
				if (res.code == 200) {
					uni.setStorageSync("user", res.result);
					this.userInfo = res.result
				}
			},
			//我收到的花
			async geFlowerUser() {
				let res = await this.$http("api/user/geFlowerUser", {
					page: this.page, //true	int		当前页
					size: 10, //true	int		每页多少条10,
				}, "GET")
				// console.log(res);
				if (res.code == 200) {
					this.Records = this.Records.concat(res.result.data)
					this.total = res.result.total
				}
			}
		},
		onPullDownRefresh() {
			console.log('refresh');
			this.page = 1
			this.Records = []
			this.getUserInfo()
			this.geFlowerUser()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			if (this.Records.length >= this.total) return
			this.page += 1
			this.geFlowerUser()
		}
	}
</script>

<style scoped lang="scss">
	.flowerPage {
		max-height: 100vh;

		.fixedTop {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			width: 100%;

			image,
			text {
				width: 50rpx;
				height: 50rpx;
				margin-left: 32rpx;
			}

			view {
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
			}
		}

		.topNum {
			width: 100%;
			height: 564rpx;
			background: url("https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/gift/bg.png") no-repeat;
			background-size: 100% auto;
			box-sizing: border-box;
			padding: 212rpx 32rpx 0;

			.value {
				font-weight: bold;
				font-size: 112rpx;
				color: #FFFFFF;
			}

			.key {
				padding-top: 16rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
			}
		}

		.content {
			width: 750rpx;
			max-height: calc(100vh - 480rpx);
			background: #FFFFFF;
			border-radius: 48rpx 48rpx 0rpx 0rpx;
			margin-top: -84rpx;
			box-sizing: border-box;
			padding: 32rpx;

			.title {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					display: flex;
					align-items: center;
					font-weight: 800;
					font-size: 32rpx;
					color: #333333;

					text {
						font-weight: 500;
						font-size: 24rpx;
						color: #ff7950;
						padding: 0 20rpx;
						text-decoration: underline;
					}
				}

				.right {
					display: flex;
					align-items: center;

					image {
						width: 28rpx;
						height: 28rpx;
					}

					text {
						font-weight: bold;
						font-size: 24rpx;
						color: #333333;
						padding-left: 4rpx;
					}
				}
			}

			.list {
				padding-top: 32rpx;
				box-sizing: border-box;

				.item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;
					height: 104rpx;
					border-bottom: 2rpx solid #fafafa;

					.left {
						display: flex;
						align-items: center;

						image {
							width: 68rpx;
							height: 68rpx;
						}

						.userData {
							padding-left: 24rpx;
							.name {
								font-weight: bold;
								font-size: 28rpx;
								color: #333333;
							}

							.time {
								padding-top: 12rpx;
								font-weight: bold;
								font-size: 24rpx;
								color: #8D8F90;
							}
						}
					}

					.right {
						display: flex;
						align-items: center;

						image {
							width: 32rpx;
							height: 32rpx;
						}

						text {
							padding-left: 4rpx;
							font-weight: bold;
							font-size: 24rpx;
							color: #333333;
						}
					}
				}
			}
		}

		.showflower {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 420rpx;
			// height: 340rpx;
			padding: 0 15rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			text-align: center;

			.tis {
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
				padding: 50rpx 0 30rpx 0;
			}

			.boxContent {
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				line-height: 50rpx;
				letter-spacing: 2rpx;
				padding-bottom: 30rpx;
			}

			.btns {
				display: flex;
				justify-content: center;
				padding: 50rpx 0;

				.btn {
					width: 168rpx;
					height: 52rpx;
					background: #F8F8F8;
					border-radius: 8rpx;
					text-align: center;
					line-height: 52rpx;
					margin: 0 12rpx;
					font-size: 24rpx;
				}

				.active {
					background: #FF504A;
					color: #fff;
				}
			}
		}
	}
</style>